<template>
    <div class="nav">

      <figure
        v-for="item of listNav"
        :key="item.id">
        <div class="nav-btn"
             :class="[item.color]">
          <img
            :src="item.imgUrl"
          >
        </div>
        <p>{{item.desc}}</p>
      </figure>
    </div>
</template>

<script>
    export default {
        props:["listNav"],
        name: "homeCatalog",
        data(){
          return {

          }
       }
    }
</script>

<style lang="stylus" scoped>
  .nav
    background :#ffffff
    border-bottom :0.1rem #efefef solid
    padding :0.3rem 0
    figure
      display :inline-block
      width :25%
      text-align :center
      .nav-btn
         width :50%
         height :50%
         line-height :50%
         padding :0.1rem 0
         margin :0.25rem auto
         border-radius :50%
        .red
          background : #ff1518
        .green
          background : #7dca2a
        .blue
           background : #4578ca
        .pink
           background : #ee96c4

      img
           width :80%


</style>
